<template>
    <div class="login">
        <div class="blue"></div>
        <div class="fff"></div>
        <div class="login_out">
            <h3>后台系统登录</h3>
            <div class="login_ctx">
                <div class="div_input">用户名：<input type="text" v-model="user"/></div>
                <div class="div_input">密码：<input type="text" v-model="pwd" /></div>
                <div class="div_input w_small">验证码：<input type="text" v-model="yzm"/></div>
                <div class="yzm" @click="getCode">{{sysYzm}}</div>
                <div class="btn" @click="submit">登录</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            user:'',
            pwd:'',
            yzm:'',
            sysYzm:''
        }
    },
    mounted(){//组件初始化的时候会自动执行
        this.getCode()
    },
    methods:{
        submit(){
            const {user,pwd,yzm,sysYzm} = this;

            if(user === '') return alert('用户名不能为空')
            if(pwd === '') return alert('密码不能为空')
            if(yzm === '') return alert('验证码不能为空')

            if(yzm !==sysYzm) return alert('验证码输入错误')
            console.log(user,pwd,yzm)

        },
        getCode(){
            let arr  = this.getArr();
            let data = ""
            let o    = 0
            while(o<6){
                let index = Math.floor(Math.random()*arr.length)
                data += arr[index]
                o++
            }
            this.sysYzm = data
        },
        getArr(){
            let arr=[0,1,2,3,4,5,6,7,8,9]
            for(let i=0;i<26;i++){
                arr.push(String.fromCharCode(65+i));
            }
            return arr
        }
    }
}
</script>

<style scoped>

.login{
    width: 100vw;
    height: 100vh;
}
.blue{
    background: skyblue;
    width: 100vw;
    height: 50vh;
}
.fff{
    background: #f6f6f6;
    width: 100vw;
    height: 50vh;
}

.login_out{
    width: 300px;
    height:280px;
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
h3{
    text-align: center;
    color:#fff;
}
.login_ctx{
    width: 300px;
    height:224px;
    border: 1px solid #f6f6f6;
    border-radius: 3px;
    background: #fff;

    padding: 15px;
    box-sizing: border-box;
}
.div_input{
    width: 100%;
    height: 36px;
    line-height: 36px;
    background: #ddd;
    margin-bottom: 15px;
    color:grey;
    padding: 0 15px;
    font-size: 13px;
     box-sizing: border-box;
}
.div_input input{
    border: none;
    outline: none;
    background:  #ddd;
}
.w_small{
    width: 60%;
}
.w_small input{
     width: 50%;
}
.yzm{
    position: absolute;
    right: 0;
    top:181px;
    width: 38%;
    height: 36px;
    color: blue;
    font-size: 15px;
    line-height: 36px;
    text-align: center;
}
.btn{
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: skyblue;
    color: #fff;
    font-size: 16px;
}
</style>